<template>
  <t-space direction="horizontal" style="width:100%">
    <t-card header="站点信息">
      <t-collapse :expand-icon-placement="direction" :expand-on-row-click="!onlyIcon">
        <t-collapse-panel value="0">
          <template #header>
            <t-comment author="LOGO"
              content="站点LOGO"> </t-comment>
          </template>
          <t-form ref="form" label-align="right" @submit="onSubmit">
            <t-form-item lable="logo">
              <t-space direction="vertical" :size="35">
              <img-upload @success="uploadSuccess"></img-upload>
              <t-image v-if="logo!=''" :src="logo"></t-image>
              </t-space>
            </t-form-item>

          </t-form>
        </t-collapse-panel>
        <t-collapse-panel value="1">
          <template #header>
            <t-comment author="标题与描述"
              content="站点描述信息"> </t-comment>
          </template>
          <t-form ref="form" label-align="right" @submit="onSubmit">

            <div v-for="item in list">
              <t-form-item v-if="item.key=='title'" :label="$t('pages.settings.title')" help="推荐70个字符">
                <t-input v-model="item.value" :placeholder="$t('pages.settings.title')"  @blur="save"></t-input>
              </t-form-item>
              <t-form-item v-if="item.key=='description'" :label="$t('pages.settings.description')" help="推荐156个字符">
                <t-textarea v-model="item.value" :placeholder="$t('pages.settings.description')"
                  style="width:100%" @blur="save"></t-textarea>
              </t-form-item>
            </div>

          </t-form>
        </t-collapse-panel>
        <t-collapse-panel value="2">
          <template #header>
            <t-comment author="Meta data"
              content="SEO信息配置"> </t-comment>
            </template>
          <t-form ref="form" label-align="right" @submit="onSubmit">
            <div v-for="item in list">
              <t-form-item v-if="item.key=='meta_title'" :label="$t('pages.settings.meta_title')" help="推荐70个字符">
                <t-input v-model=" item.value" :placeholder="$t('pages.settings.meta_title')" @blur="save"></t-input>
              </t-form-item>
              <t-form-item v-if="item.key=='meta_description'" :label="$t('pages.settings.meta_description')"  help="推荐156个字符">
                <t-textarea v-model="item.value" :placeholder="$t('pages.settings.meta_description')"
                  style="width:100%"  @blur="save"></t-textarea>
              </t-form-item>
            </div>


          </t-form>
        </t-collapse-panel>
        <t-collapse-panel value="3">
          <template #header><t-comment author="Twitter card"
              content="Twitter SEO信息配置 "> </t-comment></template>
          <t-form ref="form" label-align="right" @submit="onSubmit">

            <div v-for="item in list">
              <t-form-item v-if="item.key=='twitter_title'" :label="$t('pages.settings.twitter_title')" help="推荐70个字符">
                <t-input v-model=" item.value" :placeholder="$t('pages.settings.twitter_title')" @blur="save"></t-input>
              </t-form-item>
              <t-form-item v-if="item.key=='twitter_description'" :label="$t('pages.settings.twitter_description')"  help="推荐156个字符">
                <t-textarea v-model="item.value" :placeholder="$t('pages.settings.twitter_description')"  @blur="save"
                  style="width:100%"></t-textarea>
              </t-form-item>
            </div>



          </t-form>
        </t-collapse-panel>
        <t-collapse-panel value="4" >
          <template #header><t-comment author="Facebook card"
              content="Facebook SEO信息配置"> </t-comment></template>
          <t-form ref="form" label-align="right" @submit="onSubmit">

            <div v-for="item in list">
              <t-form-item v-if="item.key=='og_title'" :label="$t('pages.settings.og_title')" help="推荐70个字符">
                <t-input v-model=" item.value" :placeholder="$t('pages.settings.og_title')"  @blur="save"></t-input>
              </t-form-item>
              <t-form-item v-if="item.key=='og_description'" :label="$t('pages.settings.og_description')"  help="推荐156个字符">
                <t-textarea v-model="item.value" :placeholder="$t('pages.settings.og_description')"  @blur="save"
                  style="width:100%"></t-textarea>
              </t-form-item>
            </div>


          </t-form>
        </t-collapse-panel>
        <t-collapse-panel value="5" >
          <template #header><t-comment author="开放会员注册"
              content="允许更多会员进行注册."> </t-comment></template>
          <t-form ref="form" label-align="right" @submit="onSubmit">

            <t-form-item  :label="$t('pages.settings.open_register')">
                            <t-switch v-model="enableRegister" @change="openRegister"></t-switch>
            </t-form-item>

          </t-form>
        </t-collapse-panel>
      </t-collapse>
    </t-card>
    <t-card header="页面导航">
      <navigateSet :data="props.data"></navigateSet>
    </t-card>

  </t-space>


</template>

<script setup lang="ts">
  import {
    MessagePlugin, CollapseProps, CollapsePanelProps
  } from 'tdesign-vue-next';
  import {
    ref, defineEmits, onMounted,watch
  } from 'vue';
  import {
    settingModel
  } from '@/api/model/settingsModel';
  import navigateSet from './navigateConfig.vue'
  import { getSettingsList, saveSettings } from '@/api/settings'

  import { StarIcon, LogoGithubIcon } from 'tdesign-icons-vue-next';
  import imgUpload from '../../../components/upload/imgUpload.vue'
  const direction = ref<CollapseProps['expandIconPlacement']>('right');
  const onlyIcon = ref(false);

  const props=defineProps({
    data:{
      type:Array<settingModel>
    }
  })
  const emits = defineEmits(['close'])
  const formData = ref({})
  const list = ref<Array<settingModel>>()

  const save=()=>{
    console.log('save')
    saveSettings(list.value)
      .then(ret => {
        list.value = ret
        //MessagePlugin.success('保存成功');
      })
      .catch(e => {
        if (e.message) {
          MessagePlugin.error(e.message);
        } else {
          MessagePlugin.error(e.msg);
        }
      })

  }
  const onSubmit = ({ validateResult, firstError }) => {
    console.log('list', JSON.stringify(list.value))
    if (validateResult === true) {
      saveSettings(list.value)
        .then(ret => {
          list.value = ret
          MessagePlugin.success('保存成功');
        })
        .catch(e => {
          if (e.message) {
            MessagePlugin.error(e.message);
          } else {
            MessagePlugin.error(e.msg);
          }
        })


    }
  };
  const enableRegister=ref(false)
  const openRegister=(value)=>{
    console.log('openRegister',value)
    let i=-1;
    list.value.forEach((item,index)=>{
        if(item.key=='open_register')
        {
          i=index;
        }
    })
    list.value[i].value= value.toString()
    save()
  }

  const logo=ref('')
  const uploadSuccess=(url:string)=>{
    logo.value=url
     list.value.forEach((item,index)=>{
            if(item.key=='logo')
            {
                item.value=logo.value
            }
        })
    save()
  }



  watch(()=>props.data,
  ()=>{
    list.value=props.data
    let i=-1;
    list.value.forEach((item,index)=>{
        if(item.key=='open_register')
        {
          i=index;
        }
        if(item.key=='logo')
        {
          logo.value=item.value
        }
    })
    enableRegister.value= list.value[i].value=="true"?true:false;
  })
</script>

<style>
</style>
